<app-page-header [pageHeaderInfo]="pageHeaderInfo" />

<div class="normal-table-wrap">
  <nz-card>
    <input [colorPicker]="color" [style.background]="color" (colorPickerChange)="color = $event" />
    <p>Grayscale color mode:</p>
    <input [cpColorMode]="'grayscale'" [style.background]="color" [(colorPicker)]="color" />
    <p>Show the color in the input field:</p>
    <input [style.background]="color" [value]="color" [(colorPicker)]="color" />
    <p>Output format:</p>
    <input [cpOutputFormat]="'rgba'" [style.background]="color" [value]="color" [(colorPicker)]="color" />
    <p>Changing dialog position:</p>
    <input [cpPosition]="'top-right'" [style.background]="color" [value]="color" [(colorPicker)]="color" />
    <p>You can introduce a offset of the color picker relative to the html element:</p>
    <span [cpPosition]="'bottom'" [cpPositionOffset]="'50%'" [cpPositionRelativeToArrow]="true" [style.color]="color" [(colorPicker)]="color">Change me!</span>
    <p>Show cancel button:</p>
    <input [cpCancelButton]="true" [style.background]="color" [value]="color" [(colorPicker)]="color" />
    <p>Change cancel button class, in this example we are using a bootstrap button:</p>
    <input [cpCancelButton]="true" [cpCancelButtonClass]="'btn btn-primary btn-xs'" [style.background]="color" [value]="color" [(colorPicker)]="color" />
    <p>Show OK button:</p>
    <input [cpOKButton]="true" [cpOKButtonClass]="'btn btn-primary btn-xs'" [cpSaveClickOutside]="false" [style.background]="color" [value]="color" [(colorPicker)]="color" />
    <p>Enable Eye Dropper: You can open the eye dropper by clicking the colored circle.</p>
    <input [cpEyeDropper]="true" [cpOKButtonClass]="'btn btn-primary btn-xs'" [cpSaveClickOutside]="false" [style.background]="color" [value]="color" [(colorPicker)]="color" />
  </nz-card>
</div>
